<!-- 页头 -->
<page-header-wrapper [logo]="logo" [content]="content" [title]="'合伙人详情'" [ngClass]="{ affix: scrollTop > 210 }">
  <ng-template #logo>
    <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
      <i nz-icon nzType="left" nzTheme="outline"></i>
    </button>
  </ng-template>
  <ng-template #content>
    <nz-skeleton [nzLoading]="service.http.loading">
      <div class="user-info" nz-row>
        <div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="d-flex">
          <img [src]="detailData?.enterpriseLogo" />
          <div style="flex: 1">
            <div nz-row>
              <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24">
                <p style="margin-bottom: 0">{{ detailData?.enterpriseName }}</p>
              </div>
              <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24">
                <nz-badge nzStatus="success" nzText="正常" *ngIf="detailData?.lockedStatus === 0"> </nz-badge>
                <nz-badge nzStatus="error" nzText="冻结" *ngIf="detailData?.lockedStatus === 1"></nz-badge>
              </div>
            </div>
            <div nz-row>
              <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24">
                <p>{{ detailData?.unifiedSocialCreditCode }}</p>
              </div>
              <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24"> 企业合伙人 </div>
            </div>
            <div nz-row>
              <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24"> 注册时间：{{ detailData?.createTime }} </div>
              <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24"> 所属城市：{{ enterpriseDefaultCityName }} </div>
            </div>
          </div>
        </div>
        <div nz-col [nzXl]="6" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="text-right mt-sm">
          <ng-container *ngIf="isEdit; else editButton">
            <button [disabled]="service.http.loading" nz-button (click)="reset()"> 取消 </button>
            <button [disabled]="service.http.loading" nz-button nzDanger (click)="save()"> 保存 </button>
          </ng-container>
          <ng-template #editButton>
            <ng-container *ngIf="detailData?.approvalStatus === 10">
              <button [disabled]="service.http.loading" nz-button nzDanger (click)="auditPartner(true)"> 通过 </button>
              <button [disabled]="service.http.loading" nz-button nzDanger (click)="auditPartner(false)"> 驳回 </button>
            </ng-container>
            <ng-container *ngIf="detailData?.approvalStatus != 10">
              <button
                [disabled]="service.http.loading"
                nz-button
                nzDanger
                nz-popconfirm
                [nzPopconfirmTitle]="enable"
                (nzOnConfirm)="freezeOrResume(0)"
                nzPopconfirmPlacement="bottomRight"
                *ngIf="detailData?.lockedStatus"
                acl
                [acl-ability]="['USERCENTER-FREIGHT-ENTERPRISE-D-lock']"
              >
                启用
              </button>
              <button
                [disabled]="service.http.loading"
                nz-button
                nzDanger
                nz-popconfirm
                [nzPopconfirmTitle]="frozen"
                (nzOnConfirm)="freezeOrResume(1)"
                nzPopconfirmPlacement="bottomRight"
                *ngIf="!detailData?.lockedStatus"
                acl
                [acl-ability]="['USERCENTER-FREIGHT-ENTERPRISE-D-lock']"
              >
                冻结
              </button>
            </ng-container>
            <button [disabled]="service.http.loading" nz-button nzDanger (click)="ratify()"> 修改 </button>
          </ng-template>
        </div>
      </div>
    </nz-skeleton>
  </ng-template>

  <ng-template #frozen>
    <ng-container
      *ngTemplateOutlet="
        PopconfirmTempalte;
        context: {
          title: '确定冻结该合伙人吗？',
          content: '停用后，该合伙人将被限制使用，不限于访问受限、邀请客户、佣金收益等，请谨慎操作'
        }
      "
    >
    </ng-container>
  </ng-template>
  <ng-template #enable>
    <ng-container
      *ngTemplateOutlet="
        PopconfirmTempalte;
        context: { title: '确定启用该合伙人吗？', content: '启用后，该该合伙人将恢复正常使用功能，请再次确认' }
      "
    >
    </ng-container>
  </ng-template>
</page-header-wrapper>

<nz-card [class]="isEdit ? 'edit-box' : 'readOnly-box'">
  <sv-container col="3">
    <sv-title>企业管理员信息</sv-title>
    <sv label="姓名">
      <input
        nz-input
        type="text"
        [(ngModel)]="detailData.adminUserInfo.name"
        [readonly]="!isEdit"
        [nzBorderless]="!isEdit"
        [placeholder]="isEdit ? '' : '-'"
      />
    </sv>
    <sv label="手机号">
      <!-- <input nz-input type="text" [(ngModel)]="detailData.adminUserInfo.mobile" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" /> -->
      {{ detailData.adminUserInfo.mobile }}
    </sv>
    <sv label="身份证号">
      <input
        nz-input
        type="text"
        [(ngModel)]="detailData.adminUserInfo.certificateNumber"
        [readonly]="!isEdit"
        [nzBorderless]="!isEdit"
        [placeholder]="isEdit ? '' : '-'"
      />
    </sv>
    <sv label="身份证照" col="2">
      <div class="d-flex">
        <ng-container
          *ngTemplateOutlet="
            uploadTemplate;
            context: {
              data: detailData?.adminUserInfo,
              status: isEdit,
              key: 'certificatePhotoFrontWatermark',
              key2: 'certificatePhotoFront',
              hover: 'certificateBackFront'
            }
          "
        >
        </ng-container>
        <ng-container
          *ngTemplateOutlet="
            uploadTemplate;
            context: {
              data: detailData?.adminUserInfo,
              status: isEdit,
              key: 'certificatePhotoBackWatermark',
              key2: 'certificatePhotoBack',
              hover: 'certificateBack'
            }
          "
        >
        </ng-container>
      </div>
    </sv>
    <sv label="身份证有效期" col="1">
      <nz-date-picker
        [(ngModel)]="detailData.adminUserInfo.validStartTime"
        [nzDisabled]="!isEdit"
        nzPlaceHolder=" "
        [nzBorderless]="!isEdit"
        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
        style="width: 140px"
        class="calendar"
      >
      </nz-date-picker>
      -
      <ng-container *ngIf="!isEdit && !detailData?.adminUserInfo.validEndTime && detailData?.adminUserInfo.validStartTime">
        <label style="padding-left: 11px">长期</label>
      </ng-container>
      <nz-date-picker
        [(ngModel)]="detailData.adminUserInfo.validEndTime"
        [nzDisabled]="!isEdit"
        nzPlaceHolder=" "
        [nzBorderless]="!isEdit"
        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
        style="width: 140px"
        class="calendar"
      >
      </nz-date-picker>
      <ng-container *ngIf="isEdit">
        <label
          nz-checkbox
          [ngModel]="!!!detailData.adminUserInfo.validEndTime"
          (ngModelChange)="$event ? (detailData.adminUserInfo.validEndTime = '') : ''"
          class="ml-sm"
          >长期</label
        >
      </ng-container>
    </sv>
  </sv-container>

  <nz-divider></nz-divider>
  <sv-container col="3" class="mt16">
    <sv-title>
      <label class="mr-md">企业基本信息</label>
      <label *ngIf="detailData?.approvalStatus === 10" style="color: #1890ff"
        ><i nz-icon nzType="info-circle" nzTheme="fill" class="mr-xs"></i>待审核
      </label>
      <label *ngIf="detailData?.approvalStatus === 20" style="color: #52c41a"
        ><i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
      </label>
      <label *ngIf="detailData?.approvalStatus === 30" style="color: #ff4d4f"
        ><i nz-icon nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回&nbsp;驳回原因:{{ detailData?.approvalOpinion }}
      </label>
      <p style="margin-bottom: 0">
        四要素验证：
        <label *ngIf="detailData?.esignCheckStatus === 0" style="color: #ff4d4f"
          ><i nz-icon nzType="info-circle" nzTheme="fill" class="mr-xs"></i>不通过&nbsp;&nbsp;驳回原因:{{ detailData?.esignCheckMsg }}
        </label>
        <label *ngIf="detailData?.esignCheckStatus === 1" style="color: #52c41a"
          ><i nz-icon nzType="check-circle" nzTheme="fill" class="mr-xs"></i>通过
        </label>
        <label *ngIf="detailData?.esignCheckStatus === 2" style="color: #1890ff"
          ><i nz-icon nzType="close-circle" nzTheme="fill" class="mr-xs"></i>未认证：&nbsp;&nbsp;{{ detailData?.esignCheckMsg }}
        </label>
      </p>
    </sv-title>
    <sv label="公司名称">
      <!-- <input nz-input type="text" [(ngModel)]="" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit ? '' : '-'" /> -->
      {{ detailData.enterpriseName }}
    </sv>
    <sv label="统一社会信用代码">
      <!-- <input nz-input type="text" [(ngModel)]="detailData.unifiedSocialCreditCode" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit ? '' : '-'" /> -->
      {{ detailData.unifiedSocialCreditCode }}
    </sv>
    <sv label="营业执照" col="2">
      <ng-container
        *ngTemplateOutlet="
          uploadTemplate;
          context: { data: detailData, status: isEdit, key: 'licensePhotoWatermark', key2: 'licensePhoto', hover: 'detailPhoto' }
        "
      >
      </ng-container>
    </sv>

    <sv label="营业期限" col="1">
      <nz-date-picker
        [(ngModel)]="detailData.operatingStartTime"
        [nzDisabled]="!isEdit"
        nzPlaceHolder=" "
        [nzBorderless]="!isEdit"
        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
        style="width: 100px"
        class="calendar"
      >
      </nz-date-picker>
      -
      <ng-container *ngIf="!isEdit && !detailData?.operatingEndTime && detailData?.operatingStartTime">
        <label style="padding-left: 11px">长期</label>
      </ng-container>
      <nz-date-picker
        [(ngModel)]="detailData.operatingEndTime"
        [nzDisabled]="!isEdit"
        nzPlaceHolder=" "
        [nzBorderless]="!isEdit"
        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
        style="width: 100px"
        class="calendar"
      >
      </nz-date-picker>
      <ng-container *ngIf="isEdit">
        <label
          nz-checkbox
          [ngModel]="!!!detailData.operatingEndTime"
          (ngModelChange)="$event ? (detailData.operatingEndTime = '') : ''"
          class="ml-sm"
          >长期</label
        >
      </ng-container>
    </sv>
  </sv-container>
  <nz-divider></nz-divider>
  <sv-container col="3" class="mt16">
    <sv-title>企业法人信息</sv-title>
    <sv label="法定代表人">
      <input
        nz-input
        type="text"
        [(ngModel)]="detailData.legalPersonIdentity.name"
        [readonly]="!isEdit"
        [nzBorderless]="!isEdit"
        [placeholder]="isEdit ? '' : '-'"
      />
    </sv>
    <sv label="身份证号码">
      <input
        nz-input
        type="text"
        [(ngModel)]="detailData.legalPersonIdentity.certificateNumber"
        [readonly]="!isEdit"
        [nzBorderless]="!isEdit"
        [placeholder]="isEdit ? '' : '-'"
      />
    </sv>
    <sv label="身份证有效期" col="1">
      <nz-date-picker
        [(ngModel)]="detailData.legalPersonIdentity.validStartTime"
        [nzDisabled]="!isEdit"
        nzPlaceHolder=" "
        [nzBorderless]="!isEdit"
        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
        style="width: 140px"
        class="calendar"
      ></nz-date-picker>
      -
      <ng-container *ngIf="!isEdit && !detailData?.legalPersonIdentity?.validEndTime && detailData.legalPersonIdentity.validStartTime">
        <label style="padding-left: 11px">长期</label>
      </ng-container>
      <nz-date-picker
        [(ngModel)]="detailData.legalPersonIdentity.validEndTime"
        [nzDisabled]="!isEdit"
        nzPlaceHolder=" "
        [nzBorderless]="!isEdit"
        [nzSuffixIcon]="isEdit ? 'calendar' : ''"
        style="width: 140px"
        class="calendar"
      >
      </nz-date-picker>
      <ng-container *ngIf="isEdit">
        <label
          nz-checkbox
          [ngModel]="!!!detailData.legalPersonIdentity.validEndTime"
          (ngModelChange)="$event ? (detailData.legalPersonIdentity.validEndTime = '') : ''"
          class="ml-sm"
          >长期</label
        >
      </ng-container>
    </sv>
    <sv label="身份证照" col="1">
      <div class="d-flex">
        <ng-container
          *ngTemplateOutlet="
            uploadTemplate;
            context: {
              data: detailData?.legalPersonIdentity,
              status: isEdit,
              key: 'certificatePhotoFrontWatermark',
              key2: 'certificatePhotoFront',
              hover: 'legalFront'
            }
          "
        >
        </ng-container>
        <ng-container
          *ngTemplateOutlet="
            uploadTemplate;
            context: {
              data: detailData?.legalPersonIdentity,
              status: isEdit,
              key: 'certificatePhotoBackWatermark',
              key2: 'certificatePhotoBack',
              hover: 'legalBack'
            }
          "
        >
        </ng-container>
      </div>
    </sv>
    <sv label="所属城市">
      <ng-container *ngIf="isEdit; else cascaderelseTemplate">
        <nz-tree-select
          #areaTreeSelect
          style="width: 350px"
          [(ngModel)]="enterpriseAddressCode"
          [nzDropdownStyle]="{ 'max-height': '300px' }"
          [nzExpandedKeys]="enterpriseDefaultAddressCode"
          [nzNodes]="areaList"
          [nzAsyncData]="true"
          [nzCheckStrictly]="true"
          nzCheckable
          (nzExpandChange)="onExpandChange($event.node)"
          nzDropdownClassName="area-tree-select"
        >
        </nz-tree-select>
      </ng-container>
      <ng-template #cascaderelseTemplate>
        {{ enterpriseDefaultCityName || '-' }}
      </ng-template>
    </sv>
  </sv-container>
  <nz-divider></nz-divider>
  <sv-container col="3" class="mt16">
    <sv-title>渠道销售信息</sv-title>
    <sv label="姓名"> {{ detailData?.channelName }} </sv>
    <sv label="手机号"> {{ detailData?.channelMobile }} </sv>
    <sv label="绑定时间"> {{ detailData?.bindChannelTime }} </sv>
  </sv-container>
</nz-card>

<nz-card>
  <sv-container col="3" class="mt16">
    <sv-title>修改渠道销售记录</sv-title>
  </sv-container>
  <st
  #st
  [data]="service.$api_get_personal_channel_list"
  [columns]="columns"
  [req]="{ params: { partnerId: route.snapshot.params.id } }"
  [loading]="service.http.loading"
  bordered
  size="small"
  [page]="{ show: false }"
  [scroll]="{ x: '1200px' }"
>
</st>
</nz-card>

<ng-template #PopconfirmTempalte let-title="title" let-content="content">
  <div class="ant-popover-message">
    <i nz-icon nzType="info-circle" nzTheme="fill"></i>
    <div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">{{ title }} </div>
    <div class="ant-popover-message-title ng-star-inserted">
      {{ content }}
    </div>
  </div>
</ng-template>

<ng-template #uploadTemplate let-data="data" let-status="status" let-key="key" let-key2="key2" let-hover="hover">
  <nz-upload
    class="avatar-uploader"
    [nzAction]="uploadURl"
    nzName="multipartFile"
    nzListType="picture-card"
    [nzShowUploadList]="false"
    nzFileType="image/png,image/jpeg,image/jpg,image/gif"
    [nzDisabled]="!isEdit || disabledUpload"
    (nzChange)="changeUpload($event, data, key, key2, hover)"
  >
    <ng-container *ngIf="!data[key] && isEdit">
      <i class="upload-icon" nz-icon [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
      <div class="ant-upload-text">上传</div>
    </ng-container>
    <div
      *ngIf="data[key]"
      (mouseover)="detailData[hover] = true"
      (mouseleave)="detailData[hover] = false"
      (click)="$event.cancelBubble = true"
      class="image-hover"
    >
      <img nz-image [nzSrc]="data[key]" style="width: 200px; height: 160px" />
      <i
        nz-icon
        *ngIf="detailData[hover] && isEdit"
        nzType="close-circle"
        nzTheme="fill"
        class="delete-icon"
        (click)="deleteImg(data, key, key2)"
      ></i>
    </div>
  </nz-upload>
</ng-template>
